<div class="container">
	<div id="alert-container"></div>
	<div id="game-container">
<?php
if (! $game) {
	// для поисковиков, ну и вообще чтоб не мельтишило при медленных коннектах
	?>
		<div id="intro-container" class="jumbotron">
			<h1>Футбольный гуру</h1>
			<p>Игра является самообучающейся экспертной системой. Свои
				предположения она основывает на информации, которую добавили
				предыдущие игроки.</p>
			<p>Загадайте футбольную персону, а я угадаю её, задав вам несколько
				вопросов.</p>
			<p>
				<a class="btn btn-lg btn-primary" href="#begin">Начнём!</a>
			</p>
		</div>
<?php } ?>  
	</div>
</div>

<div id="modal-container"></div>

<script type="text/template" id="alert-template">
<div class="alert alert-warning">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
	<%=model%>
</div>
</script>

<script type="text/template" id="game-template">
<div>hello</div>
</script>

<script type="text/template" id="question-template">
<div class="jumbotron">
<form>
	<input id="answer-id" type="hidden" value="<%=fact._id%>">
	<h1><span class="label label-default">#<%=question%></span> <%=fact.title%> 
<sup>
<button id="user-edit-button" type="button" class="btn btn-default btn-xs" title="Предложить свой вариант"><span class="glyphicon glyphicon-pencil"></span></button><button 
id="user-delete-button" type="button" class="btn btn-default btn-xs" title="Пожаловаться"><span class="glyphicon glyphicon-remove"></span></button>
</sup>
</h1>
	<p>Соответствует ли факт загаданной персоне?</p>
	<p>
		<!--<div class="btn-group btn-group-lg"> -->
			<button type="submit" class="btn btn-lg btn-primary" name="submit" value="yes">Да</button>
			<button type="submit" class="btn btn-lg btn-primary" name="submit" value="unknow">Не знаю</button>
			<button type="submit" class="btn btn-lg btn-primary" name="submit" value="no">Нет</button>
		<!--</div> -->
	</p>
</form>
</div>
</script>

<script type="text/template" id="guess-template">
<div class="jumbotron">
<form>
	<p>Я думаю, что вы загадали:</p>
	<h1><%=guess.title%>
<sup>
<button type="button" class="btn btn-default btn-xs" title="Предложить свой вариант"><span class="glyphicon glyphicon-pencil"></span></button><button 
type="button" class="btn btn-default btn-xs" title="Пожаловаться"><span class="glyphicon glyphicon-remove"></span></button>
</sup>
</h1>
	<p>
		<!--<div class="btn-group btn-group-lg"> -->
			<button type="submit" class="btn btn-lg btn-primary" name="submit" value="yes">Да</button>
			<button type="submit" class="btn btn-lg btn-primary" name="submit" value="no">Нет</button>
		<!--</div> -->
	</p>
</form>
</div>
</script>

<script type="text/template" id="intro-template">
	<div id="intro-container" class="jumbotron">
		<h1>Футбольный гуру</h1>
		<p>Игра является самообучающейся экспертной системой. Свои
			предположения она основывает на информации, которую добавили
			предыдущие игроки.</p>
		<p>Загадайте футбольную персону, а я угадаю её, задав вам несколько
			вопросов.</p>
		<p>
			<a class="btn btn-lg btn-primary" href="#begin">Начнём!</a>
		</p>
	</div>
</script>

<script type="text/template" id="loss-template">
	<div class="jumbotron">
		<h1>Я угадал! Отлично сыграли!</h1>

		<p>Загадайте футбольную персону, а я угадаю её, задав вам несколько
			вопросов.</p>
		<p>
			<a class="btn btn-lg btn-primary" href="#begin">Играем еще!</a>
		</p>
	</div>
</script>


<script type="text/template" id="imagined-template">
	<div class="jumbotron">
		<h1>Поздравляю с победой!</h1>
		<p>Вы серьёзный противник! Любопытно - кого же вы загадали?</p>
		<form class="form-inline">
			<input type="text" autocomplete="off" class="form-control input-lg" style="width:auto;min-width:80%;" 
			id="imaginedTitle" placeholder="Как зовут загаданную персону">
			<button type="submit" class="btn btn-lg btn-primary">Отправить</button>
			<!-- <a class="btn btn-lg btn-primary" href="#imagined">Отправить</a> -->
		</form>
	</div>
</script>


<script type="text/template" id="fact-template">
	<div class="jumbotron">
		<h1>Чем отличаются?</h1>
		<p>Каким фактом можно было бы характеризовать персону "<%=conclusion.title%>", и который не свойственен персоне "<%=guess.title%>"?</p>
		<form class="form-inline">
			<input type="text"  autocomplete="off" class="form-control input-lg" style="width:auto;min-width:80%;" 
			id="factTitle" placeholder="Факт, характеризующий персону &quot;<%=conclusion.title%>&quot;">
			<button type="submit" class="btn btn-lg btn-primary">Отправить</button>
		</form>
	</div>
</script>

<script type="text/template" id="win-template">
	<div class="jumbotron">
		<h1>Спасибо за игру!</h1>

		<p>Загадайте футбольную персону, а я угадаю её, задав вам несколько
			вопросов.</p>
		<p>
			<a class="btn btn-lg btn-primary" href="#begin">Играем еще!</a>
		</p>
	</div>
</script>

<script type="text/template" id="rounds-template">
<div class="panel panel-default">
  <div class="panel-heading">Прошедшие игры</div>
  <table class="table">
  </table>
</div>
</script>

<script type="text/template" id="modal-fact-delete-template">
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" 
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
	<form id="user-proposal-form">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Предложение на удаление факта</h4>
      </div>
      <div class="modal-body">
		<h3>Вы считаете, что следует удалить факт "<%=title%>"?</h3>
		<p>Подтвердив вы продолжите игру, пропустив этот факт.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Отменить</button>
        <button type="button" class="btn btn-primary" data-confirm="confirm">Подтвердить</button>
      </div>
    </div>
	</form>
  </div>
</div>
</script>

<script type="text/template" id="modal-fact-edit-template">
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" 
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
	<form id="user-proposal-form">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Предложение на переименование факта</h4>
      </div>
      <div class="modal-body">
		<h3>Введите новое название факта</h3>
			<input type="text" name="title" autocomplete="off" class="form-control input-lg" 
			style="width:auto;min-width:80%;" id="factTitle" 
			placeholder="Введите новое название факта <%=title%>" value="<%=title%>">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Отменить</button>
        <button type="button" class="btn btn-primary" data-confirm="confirm">Подтвердить</button>
      </div>
    </div>
	</form>
  </div>
</div>
</script>